<template>
  <div class="body">
    <y-header>
      <div slot="nav"></div>
    </y-header>
    <div class="borderLine">
      <div class="content">
        <div class="form">
          <el-form
            :model="maker"
            :rules="rules"
            ref="maker"
            label-width="100px"
            class="demo-ruleForm"
          >
            <div class="ant-row">
              <div class="ant-col ant-col-20 ant-col-offset">
                <span class="maker-info-title segment-title">1.制作人信息</span>
              </div>
            </div>
            <el-form-item label="制作人名称" prop="makerName">
              <el-input v-model="maker.makerName" size="small"></el-input>
            </el-form-item>
            <el-form-item label="制作人照片">
              <a-uploud v-model="maker.makerAva" :fileName="'makerAva'"></a-uploud>
            </el-form-item>
            <el-form-item label="性别">
              <el-radio-group v-model="maker.makerGender">
                <el-radio :label = "1">男</el-radio>
                <el-radio :label = "0">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="生日" prop="makerBirth">
              <div class="block">
                <el-date-picker
                  v-model="maker.makerBirth"
                  type="date"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </div>
            </el-form-item>
            <el-form-item label="介绍" prop="makerDescription">
              <el-input
                type="textarea"
                placeholder="请输入内容"
                v-model="maker.makerDescription"
                maxlength="30"
                show-word-limit
              >
              </el-input>
            </el-form-item>
          </el-form>
        </div>

        <!-- 协议 -->
        <div
          class="ant-row ant-form-item dividing-line"
          style=" margin: 60px auto 0; padding: 20px; clear: both;"
        >
          <div class="ant-col ant-form-item-content-wrapper">
            <div class="ant-form-item-control">
              <el-checkbox v-model="checked"
                >我已阅读并同意<a
                  href="https://www.baidu.com"
                  target="_blank"
                  rel="nonpener noreferrer"
                  >《yinzhi制作人服务条款》</a
                ></el-checkbox
              >
            </div>
          </div>
        </div>

        <!-- 底部按钮 -->
        <div class="info-foot">
          <el-button type="primary" @click="submitMakerInfo()"
            >提交</el-button
          >
          <el-button @click="resetForm('maker')">重置</el-button>
        </div>
      </div>
    </div>

    <y-footer></y-footer>
  </div>
</template>

<script>
import YHeader from "@/common/header.vue";
import YFooter from "@/common/footer.vue";
import AUploud from "@/components/upload/AvaUpload.vue";
import makerInfoApi from "@/api/maker"

export default {
  components: { YHeader,YFooter,AUploud },
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      checked: false,
      fileName: 'makerAva',
      maker: {
        makerName: "",
        makerDescription: "",
        makerAva: "",
        makerGender: "",
        makerBirth: "",
      },
      rules: {
        makerName: [
          { required: true, message: "请输入制作人名称", trigger: "blur" },
          { min: 1, max: 5, message: "长度在 1 到 5 个字符", trigger: "blur" }
        ],
        makerBirth: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change"
          }
        ],
        makerDescription: [{ required: true, message: "请填写制作人简介", trigger: "blur" }]
      }
    };
  },
  methods: {
    submitMakerInfo() {
      makerInfoApi.makerInfo(this.maker).then(response => {
        if(response.code === 0) {
          this.$message.success('提交成功')
          //跳转到上一个页面
          history.go(-1)
        }
      })
    },
    resetForm(maker) {
      this.$refs[maker].resetFields();
    }
  }
};
</script>

<style lang="scss" scoped>
.borderLine {
  min-height: 200px;
  position: relative;
  padding: 30px 0 94px;
  width: 1100px;
  margin: 30px auto 0;
  border-radius: 8px;
  background-color: #fff;
}

.content {
  //表单
  .form {
    margin: 0 auto;
    width: 1000px;
    .segment-title {
      height: 34px;
      line-height: 34px;
      margin: 50px 0 9px;
      font-size: 20px;
      color: #333;
    }
    .maker-info-title {
      margin-top: 100px;
    }
    .el-input {
      width: 200px;
    }
  }
  //协议
  .ant-form-item {
    margin-bottom: 18px;
  }
  //底部
  .info-foot {
    width: 100%;
    text-align: center;
    margin-top: 50px;
  }
}

//分界线
.dividing-line {
  width: 940px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.ant-row {
  position: relative;
  height: auto;
  margin-right: 0;
  margin-left: 0;
  zoom: 1;
  display: block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.ant-form-item {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5;
  list-style: none;
  -webkit-font-feature-settings: "tnum";
  font-feature-settings: "tnum";
  margin: 0 0 24px;
  vertical-align: top;
}

.ant-col {
  position: relative;
  min-height: 1px;
}
.ant-col-offset {
  margin-left: 100px;
}
.ant-col-20 {
  display: block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 83.33333333%;
}

.ant-form-item-control {
  position: relative;
  line-height: 40px;
  zoom: 1;
}


</style>
